<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.详细的聊聊v-for</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<h2>人员列表（v-for遍历数组，用的最多！！牢牢掌握）</h2>
			<ul>
				<li v-for="(p,index) in persons" :key="p.id">
					{{p.name}} - {{p.age}} - {{p.gender}}
				</li>
			</ul>

			<h2>汽车信息（v-for遍历对象）</h2>
			<ul>
				<li v-for="(value,key,index) in car" :key="key">
					{{value}} - {{key}} - {{index}} 
				</li>
			</ul>

			<h2>消息（v-for遍历字符串）</h2>
			<ul>
				<li v-for="(char,index) in msg " :key="index">
					{{char}} - {{char}}
				</li>
			</ul>

			<h2>v-for遍历指定次数</h2>
			<h4 v-for="(number,index) in 10">
				哈哈 - {{number}} - {{index}}
			</h4>

			<h2>v-for很健壮（v-for遍历undefined是不报错的，直接罢工）</h2>
			<div v-for="item in undefined">你好</div>
			<div v-for="item in null">你好</div>
			<div v-for="item in true">你好</div>
			
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			new Vue({
				el:'#demo',
				data:{
					//人员信息（数组）
					persons:[
						{id:'giu8yu87689',name:'张三',age:18,gender:'男'},
						{id:'67tiugt65it',name:'李四',age:19,gender:'女'},
						{id:'jh67t89u786',name:'王五',age:20,gender:'男'},
						{id:'ftryguyt675',name:'赵六',age:21,gender:'女'},
					],
					//汽车信息（对象）
					car:{
						name:'奔驰c63',
						price:'50W',
						color:'灰色'
					},
					//消息（字符串）
					msg:'hello,atguigu'
				}
			})
		</script>
	</body>
</html>